<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>请假流程管理</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <style>
        .list-header {
            padding: 15px;
            background: #f8f8f8;
            border-bottom: 2px solid #e6e6e6;
        }

        .search-box {
            margin-bottom: 15px;
        }

        .toolbar {
            margin-bottom: 15px;
        }
    </style>
</head>
<body class="childrenBody">
<!-- 数据表格 -->
<div class="layui-fluid">
    <div class="list-header">
        <span class="layui-breadcrumb">
            <a href="/">工作台</a>
            <a><cite>我的请假</cite></a>
        </span>
    </div>

    <!-- 工具栏 -->
    <div class="toolbar" style="display: flex; justify-content: space-between; align-items: center;">
        <!-- 新增请假按钮，靠左 -->
        <button class="layui-btn" id="addLeave">
            <i class="layui-icon layui-icon-add-1"></i>新增请假
        </button>

        <!-- 搜索栏，靠右 -->
        <div class="search-box">

        </div>
    </div>

    <!-- 数据表格 -->
    <table id="leaveList" lay-filter="leaveList"></table>

    <!-- 操作列模板 -->
    <script type="text/html" id="leaveAction">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
    </script>
</div>

<!-- 添加/编辑表单 -->
<div style="display: none; padding: 20px" id="leaveFormDiv">
    <form class="layui-form" lay-filter="leaveForm">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">请假类型</label>
            <div class="layui-input-block">
                <select name="type" class="layui-input">
                    <option value="">请选择请假类型</option>
                    <option value="病假">病假</option>
                    <option value="事假">事假</option>
                    <option value="年假">年假</option>
                    <option value="产假">产假</option>
                    <option value="婚假">婚假</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-block">
                <input type="text" name="startTime" class="layui-input" id="startTime" placeholder="yyyy-MM-dd HH:mm:ss"
                       lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-block">
                <input type="text" name="endTime" class="layui-input" id="endTime" placeholder="yyyy-MM-dd HH:mm:ss"
                       lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">请假原因</label>
            <div class="layui-input-block">
                <textarea name="reason" placeholder="请输入原因" class="layui-textarea"
                          lay-verify="required"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="temporaryForm">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

<script src="/layui/layui.js"></script>
<script type="text/javascript" th:inline="none">
    layui.use(['table', 'form', 'laydate', 'layer'], function () {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        var $ = layui.$;

        // 初始化日期选择
        laydate.render({
            elem: '#startTime',
            type: 'datetime',
            format: 'yyyy-MM-dd'
        });
        laydate.render({
            elem: '#endTime',
            type: 'datetime',
            format: 'yyyy-MM-dd'
        });
        // 初始化表格
        table.render({
            elem: '#leaveList',
            url: '/leave/list',
            id:'leaveList',
            page: true,
            height: 'full-130',
            cols: [[
                {field: 'code', title: '请假编号', width: '20%'},
                {field: 'type', title: '类型', width: '10%'},
                {field: 'startTime', title: '开始时间', width: '15%'},
                {field: 'endTime', title: '结束时间', width: '15%'},
                {field: 'reason', title: '原因', minWidth: 200},
                {fixed: 'right', title: '操作', toolbar: '#leaveAction', width: 220}
            ]]
        });

        // 新增请假按钮点击事件
        $('#addLeave').on('click', function () {
            openForm('新增请假', null);
        });

        form.on('submit(temporaryForm)', function (data) {
            var formData = data.field;
            // 时间校验
            if (new Date(formData.startTime) >= new Date(formData.endTime)) {
                layer.msg('结束时间必须晚于开始时间');
                return false;
            }

            $.ajax({
                url: '/leave/save',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify(data.field),
                success: function (res) {
                    if (res.code === 200) {
                        layer.msg(res.msg);
                        table.reload('leaveList');
                        layer.closeAll();
                    } else {
                        layer.msg(res.msg || '操作失败');
                    }
                }
            });
            return false;
        });

        // 搜索功能
        form.on('submit(search)', function (data) {
            var searchData = data.field;
            if (searchData.startDate && searchData.endDate &&
                new Date(searchData.startDate) > new Date(searchData.endDate)) {
                layer.msg('结束时间不能早于开始时间');
                return false;
            }

            table.reload('leaveList', {
                where: {
                    type: searchData.type,  // 修正参数名（原为 reimbType）
                    startDate: searchData.startDate,
                    endDate: searchData.endDate
                }
            });
            return false;
        });

        // 工具栏监听
        table.on('tool(leaveList)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                // 调用打开表单的函数，并传入当前行数据
                openForm('编辑请假', data);
            } else if (obj.event === 'delete') {
                deleteLeave(data.id);
            }
        });

        // 打开表单窗口
        function openForm(title, data) {
            layer.open({
                type: 1,
                title: title,
                content: $('#leaveFormDiv'),
                area: ['600px', '500px'],
                success: function () {
                    if (data) {
                        form.val('leaveForm', data);
                    } else {
                        form.val('leaveForm', {
                            id: '',
                            leaveType: '',
                            startTime: '',
                            endTime: '',
                            reason: ''
                        });
                    }
                }
            });
        }

        // 删除请假
        function deleteLeave(id) {
            layer.confirm('确定删除该记录？', function () {
                $.ajax({
                    url: '/leave/' + id + '/delete', // 使用传入的 id
                    type: 'DELETE', // 与后端 DELETE 方法匹配
                    success: function (res) {
                        if (res.code === 200) {
                            layer.msg(res.msg);
                            table.reload('leaveList'); // 刷新表格
                        } else {
                            layer.msg(res.msg || '删除失败');
                        }
                    },
                    error: function () {
                        layer.msg('删除失败');
                    }
                });
            });
        }
    });
</script>
</body>
</html>
